<template>
                      <div class="unread">
                                <div class="unread-notification" v-if="room_unread_lastmessage?.unread>0">
                                        {{room_unread_lastmessage?.unread}}
                                </div>
                      </div>
                       <div>
                        <img class="user_header_image"  
                        :src="info?.friend_info?.head_image || info?.room_info?.head_image || '/public/background_index.jpg'"
                        >
                    </div>
                    <div class="main_info_box">
                            <div>{{info?.friend_info?.username || info?.room_info?.group_name}}</div>
                            <div class="meta_info_box">
                                <span v-if="info?.friend_info?.one==undefined && room_unread_lastmessage?.last_message?.sender_username?.trim()" >
                                        {{room_unread_lastmessage?.last_message?.sender_username || ""}} :
                                </span>
                                {{ room_unread_lastmessage?.last_message?.message}}
                            </div>
                            
                    </div> 

</template>

<script setup>
import { computed, defineProps, inject, onMounted } from 'vue';
const chat=inject('chat')()
const props = defineProps({
    info: {
        type: Object,
        required:true
    }
})

const room_unread_lastmessage = computed(() => { 
      return  chat.value.get_room_unread_lastmessage_byroom_id(props?.info?.room_info?.room_id)
})
onMounted(() => { 
    // console.log(props.info)
    // console.log(chat.value.get_room_unread_lastmessage_byroom_id(props?.info?.room_info?.room_id))
})

</script>
<style  scoped>
.user_list{
    display: flex;
    height: 50px;
    width: 100%;
    font-size:16px;
    margin: 3px 1px 3px 1px;
    padding: 2px;
    vertical-align: middle;
    border-radius: 5px;
    background-color: #f8f8f9;
    box-shadow: inset 0 0 2px 0px white;
    overflow: hidden;
}

.user_list:hover{
    background-color: #e8eaec;
    transition: background-color 0.3s ease-in-out;
}
.user_list_hover{
      background-color: #e8eaec;
    transition: background-color 0.3s ease-in-out;
}
.user_header_image{
    margin-left: -2px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 5px 5px 5px 5px;
    vertical-align: middle
}
#show_nomore{
    display: block;
    height: 1px;
    background: #ddd;
    margin: 10px 30px;
}
.main_info_box{
    display: flex;
    flex-direction: column;
    width: 80%;
}
.main_info_box>div:nth-child(1){
    font-size: 15px;
    padding-left: 5px;
    color:#17233d;
    width: 80%;
    white-space: nowrap;
    overflow: hidden;  
    text-overflow: ellipsis;
}
.main_info_box>div:nth-child(2){
    font-size: 12px;
    padding-left: 8px;
    color:#515a6e;
    width: 80%;
    white-space: nowrap;
    overflow: hidden;  
    text-overflow: ellipsis;
}


.unread{
    position: absolute;
    right: 20px;
    top: calc(50% - 12px);
    width: 10px;
    height: 10px;
}
.meta_info_box{
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
    width: 100%;
    
}

.unread-notification {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;      
  height: 15px;     
  background-color: #5cadff; 
  color: white;
  border-radius: 50%;
  font-size: 8px;  
  font-weight: bold;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
  animation: pulse 1.5s infinite;
}


@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }  
  100% { transform: scale(1); }
}

</style>